<template>
  <f7-page>
    <f7-navbar title="聊天消息" back-link></f7-navbar>

    <div class="tien-chat padding-bottom-xl">
      <div class="tien-item self">
        <div class="main">
          <div class="content bg-green shadow">
            <span>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</span>
          </div>
        </div>
        <div
          class="tien-avatar radius"
          style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"
        ></div>
        <div class="date">2018年3月23日 13:23</div>
      </div>
      <div class="tien-info round">对方撤回一条消息!</div>
      <div class="tien-item">
        <div
          class="tien-avatar radius"
          style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"
        ></div>
        <div class="main">
          <div class="content shadow">
            <span>喵喵喵！喵喵喵！</span>
          </div>
        </div>
        <div class="date">13:23</div>
      </div>
      <div class="tien-info">
        <span class="icon-roundclosefill text-red"></span> 对方拒绝了你的消息
      </div>
      <div class="tien-info">
        对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
        <span class="text-blue">发送好友验证</span>
      </div>
      <div class="tien-item self">
        <div class="main">
          <img src="https://image.weilanwl.com/img/3x4-1.jpg" class="radius response" />
        </div>
        <div
          class="tien-avatar radius"
          style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"
        ></div>
        <div class="date">13:23</div>
      </div>
      <div class="tien-item self">
        <div class="main">
          <div class="action text-bold text-grey">3"</div>
          <div class="content shadow">
            <span class="icon-sound text-xxl padding-right-xl"></span>
          </div>
        </div>
        <div
          class="tien-avatar radius"
          style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"
        ></div>
        <div class="date">13:23</div>
      </div>
      <div class="tien-item self">
        <div class="main">
          <div class="action">
            <span class="icon-locationfill text-orange text-xxl"></span>
          </div>
          <div class="content shadow">喵星球，喵喵市</div>
        </div>
        <div
          class="tien-avatar radius"
          style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"
        ></div>
        <div class="date">13:23</div>
      </div>
      <div class="tien-item">
        <div
          class="tien-avatar radius"
          style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"
        ></div>
        <div class="main">
          <div class="content shadow">@#$^&**</div>
          <div class="action text-grey">
            <span class="icon-warnfill text-red text-xxl"></span>
            <span class="text-sm margin-left-sm">翻译错误</span>
          </div>
        </div>
        <div class="date">13:23</div>
      </div>
    </div>

    <div class="tien-bar foot input">
      <div class="action">
        <span class="icon-sound text-grey"></span>
      </div>
      <input class="solid-bottom" maxlength="300" cursor-spacing="10">
      <div class="action">
        <span class="icon-emojifill text-grey"></span>
      </div>
      <button class="tien-btn bg-green shadow">发送</button>
    </div>
  </f7-page>
</template>

<script>
import "../../css/colorui/chat.css";
import "../../css/colorui/layout.css";
export default {
  name: "chat",
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

